<script setup name="search-detail">
import { ref, reactive, onMounted, watch } from 'vue'
import { Left } from '@icon-park/vue-next'
import { searchSim } from "@/services/search"
import { formatSearchSongs } from '@/utils/util'

import IconPark from '@/components/common/IconPark.vue'
import SearchSingle from '@/components/Search/SearchSingle.vue'
import SearchPlaylist from '@/components/Search/SearchPlaylist.vue'
import SearchVideo from '@/components/Search/SearchVideo.vue'
import SearchSinger from '@/components/Search/SearchSinger.vue'
import SearchAlbum from '@/components/Search/SearchAlbum.vue'
import SearchUser from '@/components/Search/SearchUser.vue'
import Collection from '@/components/Search/Collection.vue'

const props = defineProps({
  suggestResults: {
    type: Object
  },
  searchKey: {
    type: String
  }
})

// 当前搜索框关键词
const searchKeyWord = ref('')
// 接口返回数据
const state = reactive({
  album: {},
  artist: {},
  playList: {},
  sim_query: {},
  songs: [],
  user: {},
  moreText: '',
  loading: false
})
// 当前选中标签的标识符
const active = ref('1018')
// 自定义事件
const emit = defineEmits(['close'])

// 抛出自定义事件
const close = () => {
  emit('close')
  active.value = '1018'
  initData()
}
// 请求搜索接口
const loadData = async keyword => {
  state.loading = true
  const { result } = await searchSim({ keywords: keyword, limit: 30, type: active.value })
  Object.assign(state, {
    album: result.album,
    artist: result.artist,
    playList: result.playList,
    sim_query: result.sim_query,
    songs: formatSearchSongs(result.song.songs),
    user: result.user,
    moreText: result.song.moreText
  })
  state.loading = false
}

const handleChangeTab = type => active.value = type

const initData = () => {
  state.album = {}
  state.artist = {}
  state.playList = {}
  state.sim_query = {}
  state.songs = []
  state.user = {}
  state.moreText = ''
}

onMounted(() => {
  loadData(props.searchKey)
  // 存储父组件传递的搜索关键字
  searchKeyWord.value = props.searchKey
})

watch(() => props.searchKey, async newVal => {
  if (props.searchKey !== '') loadData(newVal)
  searchKeyWord.value = newVal
})
</script>

<template>
  <div class="search-detail">
    <van-row class="search-detail-header" align="center" justify="center">
      <van-col span="3" class="menu">
        <IconPark :icon="Left" :size="7" :strokeWidth="3" @click="close" />
      </van-col>
      <van-col span="18">
        <van-search v-model="searchKeyWord" shape="round" placeholder="搜索歌单、单曲、歌手、电台" @focus="close" />
      </van-col>
      <van-col span="3">
        <span>搜索</span>
      </van-col>
    </van-row>

    <div class="search-detail-tabs">
      <van-tabs v-model:active="active" swipeable line-width="20px" color="red" background="var(--color-background)">
        <van-tab title="综合" name="1018">
          <Collection :result="state" :searchKey="searchKeyWord" @changeTabs="handleChangeTab" />
        </van-tab>
        <van-tab title="单曲" name="1">
          <SearchSingle :searchKey="searchKeyWord" />
        </van-tab>
        <van-tab title="歌单" name="1000">
          <SearchPlaylist :searchKey="searchKeyWord" />
        </van-tab>
        <van-tab title="视频" name="1014">
          <SearchVideo :searchKey="searchKeyWord" />
        </van-tab>
        <van-tab title="歌手" name="100">
          <SearchSinger :searchKey="searchKeyWord" />
        </van-tab>
        <van-tab title="用户" name="1002">
          <SearchUser :searchKey="searchKeyWord" />
        </van-tab>
        <van-tab title="专辑" name="10">
          <SearchAlbum :searchKey="searchKeyWord" />
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<style scoped lang="scss">
.search-detail {
  background-color: var(--list-background);

  &-header {
    background-color: var(--color-background);

    .van-col--3 {
      display: flex;
      justify-content: center;
    }

    .van-search {
      background-color: var(--color-background);

      :deep(.van-search__content--round) {
        background-color: var(--color-background-soft);
      }

      :deep(.van-field__control[type=search]) {
        color: var(--reversal-text);
      }

      :deep(.van-field__control[type=search]::placeholder) {
        color: #9b9b9b;
      }
    }

  }

  &-tabs {
    :deep(.van-tab--active) {
      color: var(--reversal-text);
    }

    :deep(.van-tabs__content--animated) {
      margin-top: 6px;
    }

    :deep(.van-swipe-item) {
      overflow: auto;
      height: 87.2vh;
      padding-bottom: 40px;
    }

    :deep(.van-tabs__line) {
      bottom: 6vw;
    }
  }
}
</style>